<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="js/html5.js"></script>
  <![endif]-->
  <script src="js/jquery.js"></script>
  <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
  <!--统计图-->
  <section style="overflow:hidden">
    <!--柱状图-->
    <div class="dataStatistic fl">
      <div id="cylindrical">
      </div>
    </div>
    <!--线性图-->
    <div class="dataStatistic fl">
      <div id="line">
      </div>
    </div>
    <!--饼状图-->
    <div class="dataStatistic fl">
      <div id="pie">
      </div>
    </div>
  </section>
</body>
</section>
<script src="js/amcharts.js" type="text/javascript"></script>
<script src="js/serial.js" type="text/javascript"></script>
<script src="js/pie.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function (e) {
    //  轮询  每隔一段时间访问后台刷新数据
    setInterval(function(){
      $.ajax(
              {
                // 请求方式
                type: "GET",
                // 请求的路径
                url: "CountTimesServlet",
                // 超时
                timeout:2000,
                // 期望得到的数据类型  text
                dataType:"json",
                // 数据
                //data:{flag:"login",username:"admin"}
                //  默认异步
                async:true,
                // data: {},
                // 响应成功执行该函数
                success: function(result,status,xhr){
                  MakeChart(result);
                  GetSerialChart(result);
                  getAmSerialChart(result);
                },
              }
      );
    },3000);
  });

  //柱状图
  function GetSerialChart(json) {
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = json;
    //json数据的key
    chart.categoryField = "accountRealName";
    //不选择
    chart.rotate = false;
    //值越大柱状图面积越大
    chart.depth3D = 20;
    //柱子旋转角度角度
    chart.angle = 30;
    var mCtCategoryAxis = chart.categoryAxis;
    mCtCategoryAxis.axisColor = "#efefef";
    //背景颜色透明度
    mCtCategoryAxis.fillAlpha = 0.5;
    //背景边框线透明度
    mCtCategoryAxis.gridAlpha = 0;
    mCtCategoryAxis.fillColor = "#efefef";
    var valueAxis = new AmCharts.ValueAxis();
    //左边刻度线颜色
    valueAxis.axisColor = "#ccc";
    //标题
    valueAxis.title = "登录统计图";
    //刻度线透明度
    valueAxis.gridAlpha = 0.2;
    chart.addValueAxis(valueAxis);
    var graph = new AmCharts.AmGraph();
    graph.title = "logTimes";
    graph.valueField = "logTimes";
    graph.type = "column";
    //鼠标移入提示信息
    graph.balloonText = "登录数据[[accountRealName]] [[logTimes]]";
    //边框透明度
    graph.lineAlpha = 0.3;
    //填充颜色
    graph.fillColors = "#b9121b";
    graph.fillAlphas = 1;

    chart.addGraph(graph);

    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorAlpha = 0;
    chartCursor.zoomable = false;
    chartCursor.categoryBalloonEnabled = false;
    chart.addChartCursor(chartCursor);

    chart.creditsPosition = "top-right";

    //显示在Main div中
    chart.write("cylindrical");
  }
  //折线图
   function getAmSerialChart(json){
       var chart = new AmCharts.AmSerialChart();
       chart.dataProvider = json;
       chart.categoryField = "accountRealName";
       chart.angle = 30;
       chart.depth3D = 20;
       //标题
       //chart.addTitle("3D折线图Demo", 15);
       var graph = new AmCharts.AmGraph();
       chart.addGraph(graph);
       graph.valueField = "logTimes";
       //背景颜色透明度
       graph.fillAlphas = 0.3;
       //类型
       graph.type = "line";
       //圆角
       graph.bullet = "round";
       //线颜色
       graph.lineColor = "#8e3e1f";
       //提示信息
       graph.balloonText = "[[accountRealName]]: [[logTimes]]";
       var categoryAxis = chart.categoryAxis;
       categoryAxis.autoGridCount = false;
       categoryAxis.gridCount = json.length;
       categoryAxis.gridPosition = "start";
       chart.write("line");
   }

  //饼图
  //根据json数据生成饼状图，并将饼状图显示到div中
  function MakeChart(value) {
    chartData = eval(value);
    //饼状图
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    //标题数据
    chart.titleField = "accountRealName";
    //值数据
    chart.valueField = "logTimes";
    //边框线颜色
    chart.outlineColor = "#fff";
    //边框线的透明度
    chart.outlineAlpha = .8;
    //边框线的狂宽度
    chart.outlineThickness = 1;
    chart.depth3D = 20;
    chart.angle = 30;
    chart.write("pie");
  }
</script>
</html>